$(window).on('load', function(){
	// 瀑布流布局
	wrapfall();
	// 获取服务端的json数据
	var dataInt = {
		"data":[
			{"src":"1.jpg"},
			{"src":"10.jpg"},
			{"src":"13.jpg"},
			{"src":"19.jpg"},
			{"src":"6.jpg"},
			{"src":"2.jpg"},
			{"src":"20.jpg"},
			{"src":"5.jpg"}
		]
	}
	// 拉动滚动条动态加载内容
	$(window).scroll(function(event) {
		if (checkScroll) {
			$.each(dataInt.data, function(key, value){
				// 在创建div的时候一定记住是<div>，我少敲了俩尖括号，结果不堪设想
				var oBox = $("<div>").addClass('box').appendTo($('#main'));
				var oPic = $("<div>").addClass('pic').appendTo(oBox);
				$("<img>").attr("src", "img/" + value.src).appendTo(oPic);
			});
			// 创建完成后，别忘了调用wrapfall
			wrapfall();
		}
	});
});

// 是否符合加载的条件: 最后一张图片偏离文档的距离 是否小于 (可见区域的高度+滚动条偏移文档的距离)
function checkScroll(){
	// 1、获取可见区域的高度
	var documentH = $(window).height();
	// 2、获取滚动条滚动的距离
	var scrollH = $(window).scrollTop();
	// 3、获取最后一张图片距离文档的高度
	var $lastBox = $("#main").find('.box').last();
	var lastBoxD = $lastBox.offset().top + Math.floor($lastBox.outerHeight()/2);

	return lastBoxD < scrollH + documentH;
}

// 实现瀑布流布局
// 实现思路：将第二行的第一张图片放到第一行中width最小的下面1、2、3、4、5
function wrapfall(){
	// 1、获取屏幕的宽和box的宽，然后得到每一行有多少列
	var screenW = $(window).width();
	var imgW = $("#main").find(".box").eq(0).outerWidth();
	var cols = Math.floor(screenW/imgW);
	// 2、将main居中
	var $main = $("#main");
	$main.css({
		"width": imgW * cols,
		"margin": "0 auto"
	});
	var boxs = $("#main").find(".box");
	var boxHs = [];		
	boxs.each(function(index, el) {
		if(index < cols){
			boxHs.push($(el).outerHeight());
		}else {
			// 3、计算第一行最小高度的box和它的index
			var minH = Math.min.apply(null, boxHs);
			// var minH = Math.min.call(boxHs,",")
			var minHIndex = boxHs.indexOf(minH);
			// 4、设置后面box的位置
			$(el).css({
				"position": 'absolute',
				"top": minH,
				"left": imgW * minHIndex
			});
			// 5、变化放置后的高度，即用最小高度+下面图片的高度
			boxHs[minHIndex] += $(el).outerHeight();
		}
	});
}